/**
 * @file 股市面板 主要就是那个echarts
 */

<template>
    <div class="stock-panel">
        <div class="row info-cus">
            <h4 id="stockheadInfo">
                平安银行
                <small>000001</small>
            </h4>
            <span id="open">开盘价：13.95</span>
            <span id="hight">最高价：14.3</span>
            <span id="close">收盘价：：14.03</span>
            <span id="low">最低价：13.84</span>
        </div>
        <div class="row">
            <ul class="nav nav-pills pill-cus">
                <li role="presentation" class="active">
                    <a href="#">日线</a>
                </li>
            </ul>
        </div>
        <div id="stock-echart"></div>
    </div>
</template>

<script>
import echarts from '@/common/echarts-as-required';
import getOption from './stock-chart-option';
export default {
    name: 'StockPanel',
    data() {
        return {
        };
    },
    mounted() {
        let myChart = echarts.init(document.getElementById('stock-echart'));
        this.$axios({
            url: '/market/manager/chartData.do',
            method: 'post'
        }).then(data => {
            let param = {
                xdata: data.xAxis[0].data,
                sdata: data.series[0].data,
                pointData: data.pointData,
                tdstList: this.createTDSTdata(data.tdstList),
                stopList: this.createTDSTdata(data.stopList)
            };
            myChart.setOption(getOption(param));
        });
    },
    methods: {

        /**
         * 创建止盈线；
         *
         * @param {Array} tdstList 数据
         * @return {Array} 返回数据
         */
        createTDSTdata(tdstList) {
            let tdstArray = [];
            let index = -1;
            for (let i = 0; i < tdstList.length; i++) {
                let tdstData = tdstList[i];
                let xtimeValues = tdstData.xtimes.split(',');
                for (let j = 0; j < xtimeValues.length - 1; j++) {
                    tdstArray[++index] = [];
                    let lineStart = {xAxis: xtimeValues[j], yAxis: tdstData.yValue};
                    tdstArray[index][0] = lineStart;
                    let lineEnd = {xAxis: xtimeValues[j + 1], yAxis: tdstData.yValue};
                    tdstArray[index][1] = lineEnd;
                }

            }
            return tdstArray;
        }
    }
};
</script>

<style lang="less">
.stock-panel {
	padding-top: 30px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 30px;
}
#stock-echart {
	width: 100%;
	height: 400px;
	color: #fff;
}
</style>
